<template> 
	<div>
		<el-upload :action="uploadUrl" list-type="picture" :multiple="false" :show-file-list="showFileList"
			:file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove" :drag="isdrag"
			:on-success="handleUploadSuccess" :on-error="handleUploadError" :on-preview="handlePreview"
			name="shsuploadfile" accept=".jpg,.jpeg,.png,.gif,.webp,JPG,JPEG,PNG,GIF,WEBP">
			<el-button size="small" type="primary">{{tipText}}</el-button>
			<div slot="tip" v-if="showTip" class="el-upload__tip"><i
					class="color-main">{{isdrag?"支持拖拽上传":""}}</i>只能上传Jpg,Jpeg,Webp,Gif或Png文件，且不超过{{this.maxSendSize}}MB
			</div>
		</el-upload>
		<el-dialog width="80vw" :visible.sync="dialogVisible" append-to-body :modal="false">
			<img width="100%" :src="fileList[0].url" alt="">
		</el-dialog>
	</div>
</template>
<script>
	import {
		imageNowIP
	} from "@/utils/config"
	import {
		upload
	} from '@/api/upload'
	import {
		Message,
	} from 'element-ui'

	export default {
		name: 'singleUpload',
		props: {
			value: String,
			showTip: {
				type: Boolean,
				default: true
			},
			fileTypeLimit: {
				type: Boolean,
				default: true
			},
			maxSendSize: {
				type: String | Number,
				default: 5
			},
			isshowFileList: {
				type: Boolean,
				default: true
			},
			tipText: {
				type: String,
				default: "选择图片"
			},
			isdrag: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			imageUrl() {
				return this.value;
			},
			imageName() {
				if (this.value != null && this.value !== '') {
					return this.value.substr(this.value.lastIndexOf("/") + 1);
				} else {
					return null;
				}
			},
			fileList() {
				return [{
					name: this.imageName,
					url: this.imageUrl
				}]
			},
			showFileList: {
				get: function() {
					return this.value !== null && this.value !== '' && this.value !== undefined && this.isshowFileList;
				},
				set: function(newValue) {}
			},
		},
		data() {
			return {
				dialogVisible: false,
				uploadUrl: `${imageNowIP}/upload_file_image`,
				whiteList: ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif', "image/heic"]
			};
		},
		methods: {
			emitInput(val) {
				this.$emit('input', val)
			},
			handleRemove(file, fileList) {
				this.emitInput('');
			},
			handlePreview(file) {
				this.dialogVisible = true;
			},
			beforeUpload(file) {
				if (this.fileTypeLimit) {
					const isLtNM = file.size / 1024 / 1024 <= this.maxSendSize;
					if (this.whiteList.indexOf(file.type) === -1) {
						this.$message.error('上传图片只能是JPG,JPEG,WEBP,GIF或PNG格式!');
						return false;
					}
					if (!isLtNM) {
						this.$message.error(`'上传图片大小不能超过 ${this.maxSendSize}MB!'`);
						return false;
					}
					return true;
				} else {
					return true;
				}
			},
			handleUploadSuccess(res, file) {
				this.showFileList = true;
				this.fileList.pop();
				let url = res.path;
				this.$set(this.fileList, this.fileList.length, {
					name: file.name || "shs-images",
					url: url
				})
				this.emitInput(this.fileList[0].url);
			},
			handleUploadError(err, file, list) {
				Message({
					message: "上传失败，联系管理员"+err.message,
					type: 'error',
					duration: 3 * 1000
				})
			}
		}
	}
</script>
<style>

</style>